<template>
  <div class="home-content" v-loading="loading">
    <!-- 轮播图区域 -->
    <ul
      ref="wrap"
      @wheel="wheelTo"
      @transitionend="transEnd"
      class="banner-wrap"
      :style="{ 'margin-top': moveTop }"
      v-if="data"
    >
      <li class="banner-item" v-for="item in data" :key="item.id">
        <CarousetlItem :options="item" />
      </li>
    </ul>

    <!-- 指示器区域 -->
    <ul class="indicator" v-if="data">
      <li
        class="indicator-item"
        :class="{ active: index === i }"
        @click="moveTo(i)"
        v-for="(item, i) in data"
        :key="item.id"
      ></li>
    </ul>

    <!-- 箭头区域 -->
    <div @click="prev" v-show="index > 0" class="arrow arrow-up">
      <Icon type="arrowUp" />
    </div>
    <div
      @click="next"
      v-if="data"
      v-show="index < data.length - 1"
      class="arrow arrow-down"
    >
      <Icon type="arrowDown" />
    </div>
  </div>
</template>

<script>
import Icon from "@/components/Icon";
import CarousetlItem from "./Carouselitem.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      index: 0, // 当前图片索引
      clientWidth: 0, // 容器宽度
      clientHeight: 0, // 容器高度
      isTransition: false, // 过渡是否结束
      data: null,
    };
  },
  async created() {
    await this.fetchData();
    this.setClident();
  },
  // 进行 dom 操作
  mounted() {
    this.setClident(); // 活动容器的宽度高度
    window.addEventListener("resize", this.setClident); // 当容器发生宽度和高度变化的时候，重新设置宽高
  },
  // 卸载副作用函数
  destroyed() {
    window.removeEventListener("resize", this.setClident); // 当组件销毁的时候，删除时间
  },
  computed: {
    // 根据索引设置位置
    moveTop() {
      return -this.index * this.clientHeight + "px";
    },
    ...mapState({
      loading: (state) => state.banner.loading,
    }),
  },
  methods: {
    // 请求数据
    async fetchData() {
      this.data = await this.$store.dispatch("banner/getBannerData");
    },
    // 获取容器尺寸
    setClident() {
      if (this.$refs.wrap) {
        this.clientHeight = this.$refs.wrap.clientHeight; // 当前容器的高度
        this.clientWidth = this.$refs.wrap.clientWidth; // 当前容器的宽度
      }
    },
    // 跳转到指定图片
    moveTo(i) {
      this.index = i;
      this.isTransition = true;
    },
    // 上一张图片
    next() {
      this.moveTo(this.index + 1);
    },
    // 下一张图片
    prev() {
      this.moveTo(this.index - 1);
    },
    // 鼠标滚轮切换图片
    wheelTo(e) {
      // 判断，当过渡没有结束的时候，什么都不做
      if (this.isTransition) {
        return;
      }
      // 当鼠标向后滚轮，并且当前的索引 大于 0，则进行上一张图片切换
      if (e.deltaY < 0 && this.index > 0) {
        this.prev();
      }
      // 当鼠标向前滚轮，并且当前的索引 小于 最后一张图片的索引，则进行下一张图片切换
      else if (e.deltaY > 0 && this.index < this.data.length - 1) {
        this.next();
      }
    },

    // 当过渡完成后，开启切换功能
    transEnd() {
      this.isTransition = false;
    },
  },
  components: {
    Icon,
    CarousetlItem,
  },
};
</script>

<style lang="less" scoped>
@import url(~@/style/var.less);
.home-content {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;

  // 图片容器
  .banner-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    transition: 0.8s;
    .banner-item {
      width: 100%;
      height: 100%;
    }
  }

  // 指示器
  .indicator {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    .indicator-item {
      margin: 8px auto;
      height: 8px;
      width: 8px;
      background-color: lighten(@dark, 20%);
      border: 2px solid lighten(@dark, 20%);
      border-radius: 50%;
      box-shadow: 0px 0px 2px 0px @dark;
      &.active {
        background-color: #fff;
      }
    }
  }

  @upMove: 10px;
  @keyframes arrowUp {
    0% {
      transform: translateX(-50%) translateY(-@upMove);
    }
    50% {
      transform: translateX(-50%) translateY(@upMove);
    }
    100% {
      transform: translateX(-50%) translateY(-@upMove);
    }
  }
  @keyframes arrowDown {
    0% {
      transform: translateX(-50%) translateY(@upMove);
    }
    50% {
      transform: translateX(-50%) translateY(-@upMove);
    }
    100% {
      transform: translateX(-50%) translateY(@upMove);
    }
  }

  // 上下箭头
  .arrow {
    @gap: 30px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: @gray;
    font-size: 30px;
    &.arrow-up {
      top: @gap;
      animation: arrowUp 2s infinite;
    }
    &.arrow-down {
      bottom: @gap;
      animation: arrowDown 2s infinite;
    }
  }
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    margin: 0;
    padding: 0;
  }
}
</style>